<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充值 - AI智能改写</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="js/uni.webview.js"></script>
    <style>
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        .package-card {
            transition: all 0.3s ease;
        }
        .package-card:hover {
            transform: translateY(-5px);
        }
        .selected-card {
            border-color: #4f46e5;
            background-color: #f5f3ff;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app">
        <!-- 导航栏 -->
        <nav class="bg-white shadow-md w-full">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex">
                        <div class="flex-shrink-0 flex items-center">
                            <a href="index.html" class="text-2xl font-bold gradient-text">AI智能改写</a>
                        </div>
                        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                            <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">首页</a>
                            <a href="main.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">开始使用</a>
                            <a href="profile.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">个人中心</a>
                        </div>
                    </div>
                    <div class="hidden sm:ml-6 sm:flex sm:items-center">
                        <div class="flex items-center">
                            <span class="text-sm text-gray-500 mr-2">剩余Token: <span class="text-indigo-600 font-medium">1250</span></span>
                        </div>
                        <div class="ml-4 relative flex-shrink-0">
                            <div>
                                <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="用户头像">
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主体内容区 -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-900">Token充值</h1>
                <p class="mt-2 text-gray-500">选择合适的充值套餐，畅享AI降重服务</p>
            </div>
            
            <!-- 套餐选择 -->
            <div class="mb-12">
                <h2 class="text-xl font-semibold text-gray-900 mb-6">选择充值套餐</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- 基础套餐 -->
                    <div class="package-card border rounded-lg shadow-sm overflow-hidden" :class="{ 'selected-card': selectedPackage === 1 }" @click="selectPackage(1)">
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900">基础套餐</h3>
                            <div class="mt-4 flex items-baseline">
                                <span class="text-3xl font-bold text-gray-900">¥39.9</span>
                                <span class="ml-1 text-sm text-gray-500">/一次性</span>
                            </div>
                            <p class="mt-4 text-gray-500 text-sm">适合个人轻度使用的基础套餐</p>
                            
                            <ul class="mt-6 space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">5,000 Token</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">约可处理10,000字</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">有效期30天</span>
                                </li>
                            </ul>
                        </div>
                        <div class="px-6 py-4 bg-gray-50 flex items-center justify-between">
                            <span class="text-sm text-gray-500">单价: <span class="text-indigo-600">¥0.008/Token</span></span>
                            <span v-if="selectedPackage === 1" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                <i class="fas fa-check mr-1"></i> 已选择
                            </span>
                        </div>
                    </div>
                    
                    <!-- 标准套餐 -->
                    <div class="package-card border rounded-lg shadow-sm overflow-hidden" :class="{ 'selected-card': selectedPackage === 2 }" @click="selectPackage(2)">
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900">标准套餐</h3>
                            <div class="mt-4 flex items-baseline">
                                <span class="text-3xl font-bold text-gray-900">¥69.9</span>
                                <span class="ml-1 text-sm text-gray-500">/一次性</span>
                            </div>
                            <p class="mt-4 text-gray-500 text-sm">适合个人中度使用的性价比套餐</p>
                            
                            <ul class="mt-6 space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">10,000 Token</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">约可处理20,000字</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">有效期60天</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700 font-medium">赠送500 Token</span>
                                </li>
                            </ul>
                        </div>
                        <div class="px-6 py-4 bg-gray-50 flex items-center justify-between">
                            <span class="text-sm text-gray-500">单价: <span class="text-indigo-600">¥0.007/Token</span></span>
                            <span v-if="selectedPackage === 2" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                <i class="fas fa-check mr-1"></i> 已选择
                            </span>
                        </div>
                    </div>
                    
                    <!-- 高级套餐 -->
                    <div class="package-card border-2 border-indigo-500 rounded-lg shadow-md overflow-hidden relative" :class="{ 'selected-card': selectedPackage === 3 }" @click="selectPackage(3)">
                        <div class="absolute top-0 right-0">
                            <div class="bg-indigo-500 text-white px-4 py-1 text-xs font-bold uppercase tracking-wider transform rotate-45 translate-x-5 -translate-y-1">
                                推荐
                            </div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900">高级套餐</h3>
                            <div class="mt-4 flex items-baseline">
                                <span class="text-3xl font-bold text-gray-900">¥99.9</span>
                                <span class="ml-1 text-sm text-gray-500">/一次性</span>
                            </div>
                            <p class="mt-4 text-gray-500 text-sm">适合个人频繁使用的超值套餐</p>
                            
                            <ul class="mt-6 space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">15,000 Token</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">约可处理30,000字</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">有效期90天</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700 font-medium">赠送1,500 Token</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700 font-medium">优先处理</span>
                                </li>
                            </ul>
                        </div>
                        <div class="px-6 py-4 bg-indigo-50 flex items-center justify-between">
                            <span class="text-sm text-gray-500">单价: <span class="text-indigo-600">¥0.0067/Token</span></span>
                            <span v-if="selectedPackage === 3" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                <i class="fas fa-check mr-1"></i> 已选择
                            </span>
                        </div>
                    </div>
                    
                    <!-- 团队套餐 -->
                    <div class="package-card border rounded-lg shadow-sm overflow-hidden" :class="{ 'selected-card': selectedPackage === 4 }" @click="selectPackage(4)">
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900">团队套餐</h3>
                            <div class="mt-4 flex items-baseline">
                                <span class="text-3xl font-bold text-gray-900">¥299.9</span>
                                <span class="ml-1 text-sm text-gray-500">/一次性</span>
                            </div>
                            <p class="mt-4 text-gray-500 text-sm">适合多人共享使用的团队套餐</p>
                            
                            <ul class="mt-6 space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">50,000 Token</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">约可处理100,000字</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700">有效期180天</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700 font-medium">赠送5,000 Token</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700 font-medium">最高优先级处理</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span class="text-gray-700 font-medium">多账号共享</span>
                                </li>
                            </ul>
                        </div>
                        <div class="px-6 py-4 bg-gray-50 flex items-center justify-between">
                            <span class="text-sm text-gray-500">单价: <span class="text-indigo-600">¥0.006/Token</span></span>
                            <span v-if="selectedPackage === 4" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                <i class="fas fa-check mr-1"></i> 已选择
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- 自定义充值 -->
                <div class="mt-8 bg-white border rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">自定义充值</h3>
                    <div class="flex items-center">
                        <span class="text-gray-700 mr-4">Token数量:</span>
                        <el-slider v-model="customTokens" :step="1000" :min="1000" :max="100000" show-input :show-input-controls="false" input-size="small" style="flex: 1;"></el-slider>
                    </div>
                    <div class="mt-4 flex justify-between items-center">
                        <div class="text-gray-700">
                            总价: <span class="text-xl font-bold text-indigo-600">¥{{ (customTokens * 0.008).toFixed(2) }}</span>
                        </div>
                        <el-button type="primary" class="gradient-bg" @click="selectCustomPackage">
                            使用自定义充值
                        </el-button>
                    </div>
                </div>
            </div>
            
            <!-- 支付方式 -->
            <div class="mb-12">
                <h2 class="text-xl font-semibold text-gray-900 mb-6">选择支付方式</h2>
                
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="border rounded-lg p-4 flex items-center cursor-pointer" :class="{ 'border-indigo-500 bg-indigo-50': payMethod === 'wechat' }" @click="payMethod = 'wechat'">
                            <i class="fab fa-weixin text-2xl text-green-500 mr-3"></i>
                            <div>
                                <h4 class="text-gray-900 font-medium">微信支付</h4>
                                <p class="text-xs text-gray-500">使用微信扫码支付</p>
                            </div>
                            <div class="ml-auto" v-if="payMethod === 'wechat'">
                                <i class="fas fa-check-circle text-indigo-500"></i>
                            </div>
                        </div>
                        
                        <div class="border rounded-lg p-4 flex items-center cursor-pointer" :class="{ 'border-indigo-500 bg-indigo-50': payMethod === 'alipay' }" @click="payMethod = 'alipay'">
                            <i class="fab fa-alipay text-2xl text-blue-500 mr-3"></i>
                            <div>
                                <h4 class="text-gray-900 font-medium">支付宝</h4>
                                <p class="text-xs text-gray-500">使用支付宝扫码支付</p>
                            </div>
                            <div class="ml-auto" v-if="payMethod === 'alipay'">
                                <i class="fas fa-check-circle text-indigo-500"></i>
                            </div>
                        </div>
                        
                        <div class="border rounded-lg p-4 flex items-center cursor-pointer" :class="{ 'border-indigo-500 bg-indigo-50': payMethod === 'creditcard' }" @click="payMethod = 'creditcard'">
                            <i class="fas fa-credit-card text-2xl text-gray-500 mr-3"></i>
                            <div>
                                <h4 class="text-gray-900 font-medium">银行卡</h4>
                                <p class="text-xs text-gray-500">使用储蓄卡/信用卡支付</p>
                            </div>
                            <div class="ml-auto" v-if="payMethod === 'creditcard'">
                                <i class="fas fa-check-circle text-indigo-500"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 订单摘要 -->
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-900 mb-6">订单摘要</h2>
                
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="space-y-4">
                        <div class="flex justify-between">
                            <span class="text-gray-700">套餐名称</span>
                            <span class="text-gray-900 font-medium">{{ getSelectedPackageName() }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-700">Token数量</span>
                            <span class="text-gray-900 font-medium">{{ getSelectedPackageTokens() }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-700">有效期</span>
                            <span class="text-gray-900 font-medium">{{ getSelectedPackageValidity() }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-700">赠送Token</span>
                            <span class="text-green-600 font-medium">{{ getSelectedPackageBonus() }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-700">支付方式</span>
                            <span class="text-gray-900 font-medium">{{ getPayMethodName() }}</span>
                        </div>
                        <div class="border-t border-gray-200 pt-4 flex justify-between items-center">
                            <span class="text-gray-900 font-bold">应付金额</span>
                            <span class="text-2xl text-indigo-600 font-bold">¥{{ getSelectedPackagePrice() }}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 支付按钮 -->
            <div class="flex justify-center">
                <el-button type="primary" size="large" class="w-full md:w-1/3 gradient-bg text-lg py-4" @click="handlePay">
                    立即支付
                </el-button>
            </div>
            
            <!-- 支付提示 -->
            <div class="mt-6 text-center text-sm text-gray-500">
                <p>点击"立即支付"即表示您同意我们的<a href="#" class="text-indigo-600 hover:text-indigo-800">服务条款</a>和<a href="#" class="text-indigo-600 hover:text-indigo-800">充值协议</a></p>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed } = Vue;
        
        const app = createApp({
            setup() {
                const selectedPackage = ref(3); // 默认选择高级套餐
                const customTokens = ref(20000);
                const payMethod = ref('wechat');
                
                const selectPackage = (id) => {
                    selectedPackage.value = id;
                };
                
                const selectCustomPackage = () => {
                    selectedPackage.value = 5; // 5表示自定义套餐
                };
                
                const getSelectedPackageName = () => {
                    switch (selectedPackage.value) {
                        case 1: return '基础套餐';
                        case 2: return '标准套餐';
                        case 3: return '高级套餐';
                        case 4: return '团队套餐';
                        case 5: return '自定义套餐';
                        default: return '';
                    }
                };
                
                const getSelectedPackageTokens = () => {
                    switch (selectedPackage.value) {
                        case 1: return '5,000';
                        case 2: return '10,000';
                        case 3: return '15,000';
                        case 4: return '50,000';
                        case 5: return customTokens.value.toLocaleString();
                        default: return '';
                    }
                };
                
                const getSelectedPackagePrice = () => {
                    switch (selectedPackage.value) {
                        case 1: return '39.9';
                        case 2: return '69.9';
                        case 3: return '99.9';
                        case 4: return '299.9';
                        case 5: return (customTokens.value * 0.008).toFixed(2);
                        default: return '';
                    }
                };
                
                const getSelectedPackageValidity = () => {
                    switch (selectedPackage.value) {
                        case 1: return '30天';
                        case 2: return '60天';
                        case 3: return '90天';
                        case 4: return '180天';
                        case 5: return '60天';
                        default: return '';
                    }
                };
                
                const getSelectedPackageBonus = () => {
                    switch (selectedPackage.value) {
                        case 1: return '0';
                        case 2: return '500';
                        case 3: return '1,500';
                        case 4: return '5,000';
                        case 5: return Math.floor(customTokens.value * 0.05).toLocaleString();
                        default: return '';
                    }
                };
                
                const getPayMethodName = () => {
                    switch (payMethod.value) {
                        case 'wechat': return '微信支付';
                        case 'alipay': return '支付宝';
                        case 'creditcard': return '银行卡';
                        default: return '';
                    }
                };
                
                const handlePay = () => {
                    console.log('支付信息', {
                        packageId: selectedPackage.value,
                        packageName: getSelectedPackageName(),
                        tokens: getSelectedPackageTokens(),
                        price: getSelectedPackagePrice(),
                        payMethod: payMethod.value
                    });
                    // 实际应用中，这里会调用支付接口
                    // 支付成功后跳转到个人中心
                    window.location.href = 'profile.html';
                };
                
                return {
                    selectedPackage,
                    customTokens,
                    payMethod,
                    selectPackage,
                    selectCustomPackage,
                    getSelectedPackageName,
                    getSelectedPackageTokens,
                    getSelectedPackagePrice,
                    getSelectedPackageValidity,
                    getSelectedPackageBonus,
                    getPayMethodName,
                    handlePay
                };
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 